<template>
  <div class="bg">
    <div class="loginAndRegister">
      <!-- 标签页 -->
      <el-tabs type="card" v-model="activeName">
        <!-- 登录区 -->
        <el-tab-pane label="登录" name="login">
          <el-form ref="loginRef" :rules="loginRules" :model="loginForm" label-width="0px" class="login_form">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!-- 按钮区 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLogin">重置</el-button>
            </el-form-item>

          </el-form>
        </el-tab-pane>

        <!-- 注册区 -->
        <el-tab-pane label="注册" name="register">
          <div class="registerDiv">
            <el-form ref="registerRef" :rules="registerRules" :model="registerForm" label-width="0px" class="register_form">
              <!-- 用户名 -->
              <el-form-item prop="username">
                <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
              </el-form-item>

              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input v-model="registerForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
              </el-form-item>

              <!-- 邮件 -->
              <el-form-item prop="email">
                <el-input v-model="registerForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
              </el-form-item>

              <!-- 验证码 -->
              <el-form-item prop="pin">
                <el-input v-model="registerForm.pin" prefix-icon="el-icon-chat-dot-round" placeholder="请输入验证码"></el-input>
              </el-form-item>

              <!-- 按钮区 -->
              <el-form-item class="btns">
                <el-button type="primary" @click="register">登录</el-button>
                <el-button type="info" @click="resetRegister">重置</el-button>
              </el-form-item>

            </el-form>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>

  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    //验证邮箱的自定义规则
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@benlai\.com/
      if (regEmail.test(value)) {
        return cb()
      }
      cb(new Error('请输入@benlai.com结尾的电子邮箱'))
    }
    return {
      //控制标签栏默认是登录
      activeName: 'login',
      //登录表单的数据
      loginForm: {
        username: 'admin',
        password: '123456',
      },
      //注册表单的数据
      registerForm: {
        username: '',
        password: '',
        email: '',
        //验证码
        pin: '',
      },




      //登录表单的验证
      loginRules: {
        username: [
          { required: true, message: '请输入登录用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
        ]
      },
      //注册表单的验证
      registerRules: {
        username: [
          { required: true, message: '请输入登录用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
        ]
        ,
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }

        ]
        ,
        pin: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6个字符', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    //重置登录表单的内容
    resetLogin () {
      this.$refs.loginRef.resetFields()

    },
    // 重置注册表单的内容
    resetRegister () {
      this.$refs.registerRef.resetFields();
    },
    //登录按钮
    login () {
      //判断表单验证规则是否正确与错误，正确vaild为true
      this.$refs.loginRef.validate(
        async vaild => {
          //验证失败返回
          if (!vaild) return
          //验证成功继续下一步，发起请求
          const { data: res } = await this.$http.post('login', this.loginForm)
          if (res.meta.status !== 200) return this.$message.error('登录失败');
          console.log(res);
          this.$message.success('登录成功');

          // 登录成功后 将token值存到sessionStroage里
          window.sessionStorage.setItem("token", res.data.token)
          //并跳转到home
          this.$router.push('/home')


        }
      )

    },
    //注册按钮(未完成!!!!!!!!!!!!!!!!!!)
    register () {
      this.$refs.registerRef.validate(
        async vaild => {
          //验证失败返回
          if (!vaild) return

          //验证成功继续下一步，发起请求






          //并跳转到home
          this.$router.push('/home')


        }
      )

    }
  },
}
</script>

<style  scoped>
.bg {
  background: url("https://image.benlailife.com/images/gz/assets_cc/plugins/images/bgc_img_02.jpg");

  /* background-color: #ab4b6b; */
  height: 100%;
  width: 100%;
}
.loginAndRegister {
  width: 450px;
  height: 270px;
  background-color: rgb(255, 255, 255);
  /* border-radius: 3px; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}
.btns {
  display: flex;
  justify-content: center;
}

.login_form {
  padding: 30px;
}
.registerDiv {
  width: 450px;
  height: 350px;
  background-color: #fff;
}

.register_form {
  padding: 30px;
}
</style>